<span
  class="devui-toggle {{ size ? 'devui-toggle-' + size : '' }}"
  [ngClass]="{ 'devui-checked': checked, 'devui-disabled': disabled }"
  [style.background]="checked && !disabled ? color : ''"
  [style.border-color]="checked && !disabled ? color : ''"
>
  <span class="devui-toggle-inner-wrapper">
    <ng-template *ngIf="checked" [ngTemplateOutlet]="checkedTemplate || defaultCheckedTemplate"></ng-template>
    <ng-template #defaultCheckedTemplate>
      <div class="devui-toggle-inner" [innerHTML]="checkedContent"></div>
    </ng-template>
    <ng-template *ngIf="!checked" [ngTemplateOutlet]="uncheckedTemplate || defaultUncheckedTemplate"></ng-template>
    <ng-template #defaultUncheckedTemplate>
      <div class="devui-toggle-inner" [innerHTML]="uncheckedContent"></div>
    </ng-template>
  </span>
  <small></small>
</span>
